<template>
	<div class="collect">
		<div class="collect-item" v-for="item in collect " :key="item.userId" @click="goUser(item.userId)">
			<img :src="item.avatarUrl" />
			<p>{{item.nickname}}</p>
		</div>
	</div>
</template>
<script>
	export default {
		mounted() {
			this.load = this.$loading.show()
			let id = this.$route.params.id
			this.$api.subscribers({id,limit: 60}).then(res => {
				this.collect = res
				this.load.hide()
			})
		},
		data() {
			return {
				collect: [],
				load:"",
			}
		},
		methods:{
			goUser(id){
				this.$router.push('/user/'+id)
			}
		}
	}
</script>
<style lang="less" scoped="">
	.collect {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 20px;
		.collect-item {
			display: flex;
			flex-direction: column;
			margin-left: 10px;
			align-items: center;
			width: 18%;
			margin-top: 20px;
			cursor: pointer;
			&:nth-child(n+6) {
				margin-top: 45px;
			}

			img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}

			p {
				font-size: 12px;
				color: #666;
				margin-top: 5px;
			}
		}
	}
</style>
